<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside width="auto">
        <cdao :show="isshow"></cdao>
      </el-aside>

      <el-container>
        <el-header height="50px">
          <div @click="z">
            <el-button plain icon="el-icon-menu" size="mini"></el-button>
            <span>首页</span>
          </div>

          <div>
            <el-dropdown>
              <span class="el-dropdown-link">
                下拉菜单
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus"
                  >个人中心</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-circle-plus"
                  @click.native="exit"
                  >退出</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <el-main>
          <div class="flex-start">
            <div v-for="(item, index) in list" :key="index" class="ditem">
              <el-tag
                closable
                :type="item.type"
                @close="close(index)"
                @click="goto(item)"
              >
                {{ item.name }}
              </el-tag>
            </div>
          </div>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import cdao from "../../views/cdao";

export default {
  name: "",

  components: {
    cdao,
  },

  data() {
    return {
      isshow: false,
    };
  },

  created() {},
  computed: {
    list() {
      return this.$store.state.routerlist;
    },
  },
  methods: {
    // 去相对应的路由
    goto(item) {
      this.$router.push(item.path);
      this.$store.commit("changecolor", item);
    },
    // 关闭标签
    close(index) {
      this.$store.commit("remove", index);
    },
    z() {
      this.isshow = !this.isshow;
      console.log(this.isshow);
    },
    exit() {
      window.localStorage.clear();
      this.$router.replace("/login");
      this.$message.success("退出成功");
    },
  },
};
</script>

<style scoped lang="less">
.el-container {
  .el-header {
    background-color: black;
    position: relative;

    .el-button {
      margin-top: 10px;
    }

    span {
      color: white;
      margin: 10px;
    }

    .el-dropdown {
      position: absolute;
      right: 5px;
      top: 15px;
    }
  }
}

.ditem {
  margin-right: 10px;
  margin-bottom: 20px;
}
</style>
